import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import './css/lib';
import {Router, Route, IndexRoute, useRouterHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux'
import {createHashHistory} from 'history';
import store from './store'
import App from './components/App';
import Page from './components/Page';
import Index from './components/Index';
import Person from './components/Person';
import Shop from './components/Shop';
import Goods from './components/Goods';
import Login from './components/Login';
import PersonDetail from './components/PersonDetail';
import GoodDetail from './components/GoodDetail';
import 'amazeui-touch/dist/amazeui.touch.min.css'

// Expose React, ReactDOM
window.react = React;
window['react-dom'] = ReactDOM;

const appHistory = useRouterHistory(createHashHistory)({basename: ''});
const history = syncHistoryWithStore(appHistory, store);

const router = (
    <div>
        <Provider store={store}>
            <Router history={history}>
                <Route path="/login" component={Login}/>
                <Route path="/goods" component={Goods}/>
                <Route path="/" component={App}>
                    <IndexRoute component={Index}/>
                    <Route path="/person" component={Person}/>
                    <Route path="/shop" component={Shop}/>
                    <Route path="/goodDetail" component={GoodDetail}/>
                    <Route path="/personDetail" component={PersonDetail}/>
                    <Route path=":page" component={Page}/>
                </Route>
            </Router>
        </Provider>
    </div>
);

ReactDOM.render(router, document.getElementById('react-content'));